<template>
  <view class="login-container">
    <view class="login-box">
      <image src="@/static/login/logo.png" class="logo-img"></image>
      <image src="@/static/login/logo-text.png" class="logo-text"></image>
      <view v-if="!isAgree" @click="WXlogin_fake" class="login-btn">
        <image src="@/static/login/wechat-icon.png" class="wechat-icon"></image>
        <text>微信登录</text>
      </view>
      <button v-else open-type="getPhoneNumber" @getphonenumber="WXlogin" class="login-btn">
        <image src="@/static/login/wechat-icon.png" class="wechat-icon"></image>
        <text>微信登录</text>
      </button>
      <view class="separate">其他登录方式</view>
      <view class="other-login-way-box">
        <image @click="toPhoneCodeLogin" src="@/static/login/phone-icon.png" class="login-way-item"></image>
      </view>

      <!-- 用户隐私协议 -->
      <view class="agreement-box">
        <u-checkbox
          v-model="isAgree"
          @change="checkboxChange"
          shape="circle"
          activeColor="#ff0309"
          size="28rpx"
          name="isAgree"></u-checkbox>
        <view class="text">我已阅读并同意</view>
        <view @click="goAgreement('register')" class="agreement-text">《服务协议》</view>
        <view class="text">和</view>
        <view @click="goAgreement('privacy')" class="agreement-text">《隐私政策》</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { publicKey, privateKey } from '@/utils/secretKey';
import RSA from '@/utils/rsa.js';
import { wxLogin } from '@/api/login.js';
import { useUserStore } from '@/store/userStore.js';

const userStore = useUserStore();

// 同意用户隐私协议
const isAgree = ref(false);

// 用户隐私协议同意按钮
const checkboxChange = (e) => {
  console.log('e', e);
  console.log('isAgree', isAgree.value);
};

// 跳转到用户隐私协议页面
const goAgreement = (type) => {
  uni.navigateTo({
    url: `/subPages/Agreement/index?type=${type}`,
  });
};

// 勾选用户协议
const WXlogin_fake = () => {
  if (!isAgree.value) {
    uni.showToast({
      title: '请勾选阅读相关协议',
      icon: 'none',
    });
    return;
  }
};

// 微信登录
const WXlogin = async (e) => {
  console.log(e.detail);

  const obj = {
    thirdPartyId: e.detail.code,
  };
  let rsa_encrypt_res = await RSA.encrypt(obj, publicKey);

  let login_res = await wxLogin(rsa_encrypt_res);

  let rsa_decrypt_res = await RSA.decrypt(login_res.data);

  console.log('解密数据', rsa_decrypt_res);

  if (login_res.code == 0) {
    userStore.setUserToken(rsa_decrypt_res.access_token);
    userStore.assignUserAccessInfo(rsa_decrypt_res);

    uni.switchTab({
      url: '/pages/home/index',
    });
  } else if (login_res.code == 10011) {
    uni.navigateTo({
      url: '/subPages/bindingInviteCode/index?phone=' + rsa_decrypt_res,
    });
  }
};

// 手机验证码登录
const toPhoneCodeLogin = () => {
  uni.navigateTo({
    url: '/subPages/loginByPhoneCode/index',
  });
};
</script>

<style lang="scss">
.login-container {
  height: 100vh;
  padding: 184px 40px 54px;

  .login-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;

    .logo-img {
      width: 72px;
      height: 72px;
      margin-bottom: 12px;
    }

    .logo-text {
      width: 42px;
      height: 20px;
      margin-bottom: 120px;
    }

    .login-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 48px;
      font-weight: 500;
      font-size: 16px;
      color: #fff;
      border-radius: 34px;
      margin-bottom: 32px;
      background: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);

      .wechat-icon {
        width: 22px;
        height: 22px;
        margin-right: 8px;
      }
    }

    .separate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      font-size: 14px;
      color: #999;
      margin-bottom: 16px;

      &::before,
      &::after {
        content: '';
        display: inline-block;
        width: 88px;
        height: 1px;
        background-color: #ccc;
      }
    }

    .other-login-way-box {
      display: flex;
      align-items: center;
      gap: 42px;

      .login-way-item {
        width: 32px;
        height: 32px;
      }
    }

    .agreement-box {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24rpx;
      font-size: 24rpx;

      .u-checkbox {
        position: relative;
        top: -1px;
        margin-right: 6px;
      }

      .u-checkbox__label {
        display: none;
      }

      .text {
        color: #999;
      }

      .agreement-text {
        color: #ff0309;
      }
    }
  }
}
</style>
